<template>
	<div>
		<header-title />
		<div class="h-group-t"></div>
		<search-filter />
		<div class="h-group-t"></div>
		{{ dataType }}
		<template v-if="dataType === '2up'">
			<slots-card iconName="minigames-icon" titleT="casinoAll.2up" type="2up" modelValue="2up" />
		</template>
		<template v-else>
			<slots-card
				type="casino"
				modelValue="blackjack"
				iconName="blackjack"
				titleT="casinoAll.blackjack" />
		</template>
		<div class="h-group-t"></div>
		<game-list type="provider"></game-list>
		<div class="h-group-t"></div>
		<live-rank />
	</div>
</template>
<script lang="ts" setup>
import LiveRank from '../components/live-rank.vue'
import GameList from '@/components/slots/game-list/index.vue'
import SearchFilter from '../components/search-panel/index.vue'
import HeaderTitle from '../components/header-title.vue'
import SlotsCard from '@/components/slots/slots-card/index.vue'
import { useRoute } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const dataType = computed(() => {
	return route.params.game
})
</script>
